<%--
  Created by IntelliJ IDEA.
  User: 86175
  Date: 2021/8/4
  Time: 14:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>奥运奖牌榜</title>
      <script src="js/jquery.min.js"></script>
      <script src="js/bootstrap.min.js"></script>
      <link rel="stylesheet" href="css/bootstrap.min.css">
<%--      <meta http-equiv="refresh" content="1">--%>
    <script>
        $(document).ready(function () {
            show_1();
        })
        function show_1() {
          $.getJSON("MaxMedalServlet",{'ran':Math.random()},function (data){
                $.each(data,function (i,item){
                    var tr = $("<tr>").append($("<td>" ).html("<li style='font-size:12px;list-style: none;background-color:#e5e5e5;width: 20px;height: 20px;position: relative;left: 60px' id="+i+">"+(i+1)))
                        .append($("<td class='text-left'>").html("<img src='"+item.image+"' style='width: 40px ;height:30px ;border:1px solid gray;position: relative;left: -10px'>"+"<a title='修改奖牌数量' href='SelectMedalByIdServlet?id="+ item.id+ "'>"+item.country))
                        .append($("<td>").html(item.gold))
                        .append($("<td>").html(item.silver))
                        .append($("<td>").html(item.copper))
                        .append($("<td>").html(item.gold+item.silver+item.copper));
                    $("#Data").append(tr);
                    if (i==0){
                        $("#0").css({"color":"white","background-color":"red"});
                    }else if (i==1){
                        $("#1").css({"color":"white","background-color":"rgb(247, 157, 0)"});
                    }else if (i==2){
                        $("#2").css({"color":"white","background-color":"rgb(230, 122, 0)"});
                    }else {

                    }
                })
          })

        }
    </script>
  </head>

  <body>

<div class="container" >
   <img src="image/1.png" height="95px" width="1346px">
</div>
  <div class="container">
     <h3>奖牌榜</h3>
    <hr>
  </div>
<div class="container">
  <table class="table table-striped">
      <tr class="text-center">
          <td>排名</td>
          <td class="text-left">国家/地区</td>
          <td>金</td>
          <td>银</td>
          <td>铜</td>
          <td>总</td>
      </tr>
    <tbody id="Data" class="text-center">

    </tbody>

  </table>
</div>
  </body>
</html>
